<!DOCTYPE html>
<html>
  <head>
    <meta name="layout" content="main" />
    <title>Carga de legajos</title>
    <link href="${resource(dir: 'css', file: 'datepicker.css')}" rel="stylesheet"/>
    
    <script type="text/javascript" src="${resource(dir: 'js', file: 'bootstrap-datepicker.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'locales/bootstrap-datepicker.es.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'gd.js')}"></script>
    <script type="text/javascript">

    var documentTypes;

    function previewDocument(fileName) {
        var baseUrl = '<g:createLink controller="document" action="openFile" />';
        var url = baseUrl + '?fileName=' + fileName;
        var previewer = GD.DocumentPreviewer();
        previewer.previewDocument(url, fileName);
    }

    function useLastCustomer(lastCustomerId, lastCustomerDescription) {
        $('#customerId').val(lastCustomerId);
        $('#customerDescription').val(lastCustomerDescription);
        $('#customer').html(lastCustomerDescription);
    }

    function useLastBox(lastBox) {
        $('#box').val(lastBox);
    }

    function documentTypeSelected() {
        var documentTypeId = $('#documentType').val();
        var docType = documentTypes[documentTypeId];
        $('#purgeable').prop('checked', docType.purgeable);
        setExpirationDate(docType.defaultExpirationDay);
    }

    function setExpirationDate(expirationDate) {
        $('#expirationDate').datepicker('setDate', new Date(expirationDate));
    }

    $(function(){
        $('#expirationDate').datepicker({
            format: 'dd/mm/yyyy',
            todayBtn: 'linked',
            language: 'es'
        });
        var docTypesDataURL = "<g:createLink controller="documentType" action="documentTypesJSON" params="[dateFormat: 'yyyy-MM-dd']" />";
        $.getJSON(docTypesDataURL, function(data) {
        documentTypes = data.documentTypes;
        documentTypeSelected(); 
        $('#documentType').change(documentTypeSelected);
        });

    });
    </script>

  </head>
  <body>
    <div class="container">
    <div class="main-panel">
    <div class="panel panel-default">
    <div class="panel-heading"><h2>Legajo</h2></div>
    <div class="panel-body">
    
	<g:if test="${flash.errors}">
		<div class="alert alert-danger">
			<ul class="errors">
				<g:each in="${flash.errors}" var="error">
					<li>${error}</li>
				</g:each>
			</ul>
		</div>
	</g:if>

    <g:if test="${flash.success}">
    <div class="alert alert-success">${flash.message}</div> 
    </g:if>
    <g:elseif test="${flash.message}">
    <div class="alert alert-danger">${flash.message}</div> 
    </g:elseif>

    <g:if test="${needsNewVersionConfirmation}">
    <div class="alert alert-danger">
    El documento posee una versión anterior, corrija los datos o confirme para versionar
    </div> 
    </g:if>

    <button type="button" class="btn btn-default" onclick="previewDocument('${fileName}')"><span class="glyphicon glyphicon-eye-open"></span> ${fileName}</button>
    <p></p>
    
    <form role="form" method="POST" action="${createLink(controller: 'document', action: 'save')}">
      <input type="hidden" name="fileName" value="${fileName}"/>
      <div class="form-group">
        <label for="customer">Cliente</label>

		<input type="hidden" id="customerId" name="customerId" value="${customerId}" />
		<input type="hidden" id="customerDescription" name="customerDescription" value="${customerDescription}" />
		<div class="row">
			<div class="col-xs-10">
		
			<g:if test="${session.last?.customer}">
				<div class="input-group">
					<div class="form-control" id="customer">
                    <g:if test="${customerId != null}">
                    <span style="color:#aaa">${customerDescription}</span>
                    </g:if>
                    <g:else>
                    <span style="color:#aaa">Cliente</span>
                    </g:else>
                    </div>
					<span class="input-group-btn">
						<button type="button" class="btn btn-default" onclick="useLastCustomer('${session.last.customer.customerId}', '${session.last.customer.description}');"><span class="glyphicon glyphicon-repeat"></span></button>
					</span>
				</div>
			</g:if>
			<g:else>
					<div class="form-control" id="customer">
                    	<g:if test="${customerId != null}">
                    		<span style="color:#aaa">${customerDescription}</span>
                    	</g:if>
                    	<g:else>
                    		<span style="color:#aaa">Cliente</span>
                    	</g:else>
                    </div>
			</g:else>
			
			</div>
			<div class="col-xs-2">
				<a data-toggle="modal" href="${createLink(controller: 'buscarCliente', action: 'modalIndex')}" data-target="#buscarClienteModal" class="btn btn-default">Buscar Cliente</a>
			</div>
		</div>
      </div>

      <div class="form-group">
        <label for="documentType" >Tipo de documento</label>
        <select class="form-control" name="documentType" id="documentType", placeholder="Tipo de documento">
          <% documentTypes.each { documentTypeOption -> %>
          <g:if test="${documentType == documentTypeOption.id.toString()}">
          <option value="${documentTypeOption.id}" selected="selected">${documentTypeOption.name}</option>
          </g:if>  
          <g:else>
          <option value="${documentTypeOption.id}">${documentTypeOption.name}</option>
          </g:else>  
          <%}%>
        </select>
      </div>

      <fieldset disabled>  
      <div class="form-group">
        <label for="purgeable">
            <input type="checkbox" id="purgeable"> Expurgable
        </label>
      </div>
      </fieldset>

      <div class="form-group">
        <label for="box">Caja</label>

        <g:if test="${session.last?.box}">
        <div class="input-group">
          <input type="text" class="form-control" name="box" id="box" placeholder="Caja" value="${box}">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" onclick="useLastBox('${session.last.box}');"><span class="glyphicon glyphicon-repeat"></span></button>
          </span>
        </div>
        </g:if>
        <g:else>
        <input type="text" class="form-control" name="box" id="box" placeholder="Caja" value="${box}">
        </g:else>

      </div>
      
      <div class="form-group">
        <label for="expirationDate">Fecha de vencimiento</label>
        <input type="text" class="form-control" id="expirationDate" name="expirationDate" style="max-width: 12em;">
      </div>
        
      <div class="form-group">
        <label for="notes">Notas</label>
        <textarea class="form-control" id="notes" name="notes" placeholder="Notas">${notes}</textarea>
      </div>

      <g:if test="${needsNewVersionConfirmation}">
      <div class="form-group has-error">
          <div class="checkbox">
            <label>
            <input type="checkbox" name="newVersionConfirmed" id="newVersionConfirmed" value="true"> Confirmar nueva versión
            </label>
          </div>
      </div>
      </g:if>  

      <div class="form-group">
        <button type="submit" class="btn btn-default">Cargar</button>
      </div>
    </form>

    </div>
    </div>
    </div>
    </div>

    <div class="modal fade" id="buscarClienteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
  </body>
</html>
